<template>
	<el-dialog class="le-dialog" title="角色权限设置" v-model="visibleDialog" :width="500" destroy-on-close @closed="handleCancel">
		<el-tabs tab-position="top">
			<el-tab-pane label="菜单权限">
				<div class="treeMain">
					<el-tree ref="menuRef" node-key="id" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="控制台">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="控制台视图">
						<el-select v-model="dashboard" placeholder="请选择">
							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
								<span style="float: left">{{ item.label }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
							</el-option>
						</el-select>
						<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { computed, onMounted, ref, watch, reactive } from 'vue'
import role from '@/api/system/role'
import resource from '@/api/system/resource'
import { ElMessage, ElMessageBox } from 'element-plus'

// props
const myProps = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	roleId: {
		type: String,
		default: ''
	}
})

// data
const dashboardOptions = ref([
	{
		value: '0',
		label: '数据统计',
		views: 'stats'
	},
	{
		value: '1',
		label: '工作台',
		views: 'work'
	}
])
const menuRef = ref(null)
const isSaveing = ref(false)
const menu = reactive({
	list: [],
	checked: [],
	props: {
		label: data => {
			return data.title
		}
	}
})
const dashboard = ref('0')

// methods
const open = async roleId => {
	try {
		menu.checked = await role.roleResourceIdsApi(roleId)
	} catch (e) {
		console.log('根据当前用户获取角色权限失败', e)
	}
}

const resourceSet = async ids => {
	try {
		await role.roleResourceSetApi({ roleId: myProps.roleId, resourceIds: ids })
		isSaveing.value = false
		handleCancel()
		ElMessage.success('保存角色权限成功')
	} catch (e) {
		isSaveing.value = false
		console.log('保存角色权限失败', e)
		ElMessage.error('保存角色权限失败')
	}
}

const submit = async () => {
	isSaveing.value = true
	var checked = menuRef.value.getCheckedNodes(false, false)
	if (checked.length < 1) {
		ElMessageBox.confirm(`未选择菜单确定执行清空操作吗？`, '提示')
			.then(async () => {
				resourceSet([])
			})
			.catch(() => {
				isSaveing.value = false
			})
	} else {
		var resourceIds = []
		checked.forEach(function (e) {
			resourceIds.push(e.id)
		})
		try {
			await resourceSet(resourceIds)
		} catch (e) {
			isSaveing.value = false
			console.log(e)
		}
	}
}

const getMenu = async () => {
	// 获取菜单树结构
	try {
		menu.list = await resource.resourceListTreeApi()
	} catch (e) {
		console.log('获取菜单树结构失败', e)
	}
}

// 同步值
const $myEmit = defineEmits(['update:modelValue', 'successFn'])

// 关闭按钮
const closeDrawer = () => {
	$myEmit('successFn')
	$myEmit('update:modelValue', false)
}

const handleCancel = () => {
	closeDrawer()
}

// computed
const visibleDialog = computed({
	get() {
		return myProps.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})

// watch
watch(
	() => myProps.modelValue,
	val => {
		if (val) {
			open(myProps.roleId)
		}
	},
	{ immediate: true }
)

onMounted(() => {
	getMenu()
})
</script>

<style scoped>
.treeMain {
	height: 280px;
	overflow: auto;
	border: 1px solid #dcdfe6;
	margin-bottom: 10px;
}
</style>
